<template>
  <div class="trend-page">
    <!-- 背景容器 -->
    <div class="bg-container">
      <!-- 趋势分析卡片 -->
      <el-card class="trend-card" shadow="hover">
        <h2 class="card-title">心理健康数据趋势分析</h2>
        
        <!-- 数据来源说明（关联采集页） -->
        <div class="data-source">
          <p>数据来源：学生每日心理健康采集记录 | 统计范围：近7天</p>
        </div>

        <!-- 图表容器 -->
        <div class="charts-wrap">
          <!-- 1. 情绪分布饼图 -->
          <div class="chart-item">
            <h3 class="chart-title">情绪分布</h3>
            <!-- 无数据提示（引导至采集页） -->
            <div v-if="!hasData" class="no-data">
              <i class="el-icon-form"></i>
              <p>暂无采集数据</p>
              <el-button type="text" @click="$router.push('/student/StudentHome/DataCollect')">
                去“数据采集页”填写
              </el-button>
            </div>
            <!-- 饼图实例 -->
            <div v-else ref="emotionPie" class="chart" style="width: 100%; height: 300px;"></div>
          </div>

          <!-- 2. 睡眠时长柱状图 -->
          <div class="chart-item">
            <h3 class="chart-title">睡眠时长趋势</h3>
            <!-- 无数据提示（引导至采集页） -->
            <div v-if="!hasData" class="no-data">
              <i class="el-icon-form"></i>
              <p>暂无采集数据</p>
              <el-button type="text" @click="$router.push('/student/StudentHome/DataCollect')">
                去“数据采集页”填写
              </el-button>
            </div>
            <!-- 柱状图实例 -->
            <div v-else ref="sleepBar" class="chart" style="width: 100%; height: 300px;"></div>
          </div>
        </div>

        <!-- 图表字段关联说明（关联采集页+风险逻辑） -->
        <div class="chart-desc">
          <p>• 情绪分布：对应采集页“每日情绪标签”（平静/焦虑/开心/低落）</p>
          <p>• 睡眠趋势：对应采集页“每日睡眠时长”，红色柱体=睡眠＜6小时（风险关联）</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 按需引入ECharts核心模块（减小体积）
import * as echarts from 'echarts/core'
import { PieChart, BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册ECharts组件
echarts.use([
  PieChart, BarChart,
  TitleComponent, TooltipComponent, LegendComponent, GridComponent,
  CanvasRenderer
])

export default {
  name: 'TrendAnalysis',
  data() {
    return {
      collectHistory: [], // 从localStorage读取的采集历史（学生填写的原始数据）
      emotionChart: null, // 情绪饼图实例（用于销毁/resize）
      sleepChart: null    // 睡眠柱状图实例（用于销毁/resize）
    }
  },
  mounted() {
    // 页面挂载：读取采集历史数据
    this.getCollectHistory()
    // 延迟初始化图表（确保DOM渲染完成）
    this.$nextTick(() => {
      if (this.hasData) this.initCharts()
    })
  },
  watch: {
    // 采集数据变化时（如新增填写），重新渲染图表
    collectHistory() {
      this.$nextTick(() => {
        this.initCharts()
      })
    }
  },
  computed: {
    // 判断是否有采集数据（控制图表/无数据提示显示）
    hasData() {
      return this.collectHistory.length > 0
    },

    // 处理图表所需数据（从采集历史中提取近7天数据）
    chartData() {
      const recent7Days = this.collectHistory.slice(-7) // 取近7天数据
      if (recent7Days.length === 0) return { emotion: {}, sleep: {} }

      // 1. 情绪统计：映射采集页情绪值→文字+次数
      const emotionStats = { 平静: 0, 焦虑: 0, 开心: 0, 低落: 0 }
      // 2. 睡眠数据：映射采集页睡眠值→日期+数值+标签（便于柱状图展示）
      const sleepStats = { dates: [], hours: [], labels: [] }

      recent7Days.forEach(item => {
        // ---------------- 情绪数据处理 ----------------
        const emotionMap = { '1': '平静', '2': '焦虑', '3': '开心', '4': '低落' }
        const emotionText = emotionMap[item.daily.emotion] || '平静'
        emotionStats[emotionText]++

        // ---------------- 睡眠数据处理 ----------------
        sleepStats.dates.push(item.date) // 采集日期（如2025-09-15）
        // 睡眠值映射：less6→5小时（标红），6to8→7小时（正常），more8→9小时（正常）
        const sleepHourMap = { 'less6': 5, '6to8': 7, 'more8': 9 }
        const sleepLabelMap = { 'less6': '<6h', '6to8': '6-8h', 'more8': '>8h' }
        sleepStats.hours.push(sleepHourMap[item.daily.sleepTime] || 7)
        sleepStats.labels.push(sleepLabelMap[item.daily.sleepTime] || '6-8h')
      })

      return { emotionStats, sleepStats }
    }
  },
  methods: {
    // 从localStorage读取采集历史（学生填写的原始数据）
    getCollectHistory() {
      const history = JSON.parse(localStorage.getItem('collectHistory')) || []
      this.collectHistory = history
    },

    // 初始化所有图表
    initCharts() {
      if (!this.hasData) return
      this.initEmotionPie() // 情绪饼图
      this.initSleepBar()   // 睡眠柱状图
    },

    // 1. 初始化情绪分布饼图（展示近7天情绪占比）
    initEmotionPie() {
      // 销毁旧实例，避免重复渲染
      if (this.emotionChart) {
        window.removeEventListener('resize', this.emotionResize)
        this.emotionChart.dispose()
      }

      const pieDom = this.$refs.emotionPie
      this.emotionChart = echarts.init(pieDom)

      // 饼图数据：过滤次数为0的情绪（避免冗余）
      const pieData = [
        { name: '平静', value: this.chartData.emotionStats.平静, color: '#409EFF' },
        { name: '焦虑', value: this.chartData.emotionStats.焦虑, color: '#FF4949' }, // 焦虑标红（风险关联）
        { name: '开心', value: this.chartData.emotionStats.开心, color: '#67C23A' },
        { name: '低落', value: this.chartData.emotionStats.低落, color: '#909399' }
      ].filter(item => item.value > 0)

      // 饼图配置项
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c}天（{d}%）<br/>来源：每日情绪采集' // 悬停提示关联采集页
        },
        legend: {
          bottom: 0,
          left: 'center',
          textStyle: { color: '#333', fontSize: 12 }
        },
        series: [
          {
            name: '情绪天数',
            type: 'pie',
            radius: ['45%', '70%'], // 环形饼图（避免单调）
            center: ['50%', '40%'], // 饼图位置（水平居中，垂直靠上）
            itemStyle: {
              borderRadius: 8, // 扇形圆角（增强视觉）
              borderColor: '#fff', // 扇形边框（白色隔离）
              borderWidth: 2
            },
            label: { show: false }, // 隐藏扇形内部标签
            labelLine: { show: false }, // 隐藏扇形连接线
            data: pieData,
            color: pieData.map(item => item.color) // 自定义扇形颜色
          }
        ]
      }

      this.emotionChart.setOption(option)
      // 窗口resize监听（适配屏幕变化）
      this.emotionResize = () => this.emotionChart.resize()
      window.addEventListener('resize', this.emotionResize)
    },

    // 2. 初始化睡眠时长柱状图（展示近7天睡眠趋势，关联风险）
    initSleepBar() {
      // 销毁旧实例，避免重复渲染
      if (this.sleepChart) {
        window.removeEventListener('resize', this.sleepResize)
        this.sleepChart.dispose()
      }

      const barDom = this.$refs.sleepBar
      this.sleepChart = echarts.init(barDom)

      // 柱状图配置项
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: '日期：{b}<br/>睡眠时长：{c}小时（{d}）<br/>来源：每日睡眠采集' // 悬停提示关联采集页
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '15%',
          top: '10%',
          containLabel: true // 防止坐标轴标签截断
        },
        xAxis: {
          type: 'category',
          data: this.chartData.sleepStats.dates, // 采集日期
          axisLabel: {
            rotate: 30, // 日期标签旋转（避免重叠）
            color: '#333',
            fontSize: 12
          },
          axisLine: { lineStyle: { color: '#eee' } }
        },
        yAxis: {
          type: 'value',
          name: '睡眠时长（小时）',
          nameTextStyle: { color: '#333', fontSize: 12 },
          min: 0,
          max: 12,
          interval: 3, // Y轴刻度间隔（3小时）
          axisLabel: {
            color: '#333',
            fontSize: 12,
            formatter: '{value}h' // 显示“小时”单位
          },
          axisLine: { lineStyle: { color: '#eee' } },
          splitLine: { lineStyle: { color: '#f5f5f5' } } // 网格线（浅色）
        },
        series: [
          {
            name: '睡眠时长',
            type: 'bar',
            // 柱状图数据：关联采集值+顶部标签
            data: this.chartData.sleepStats.hours.map((hour, index) => ({
              value: hour,
              name: this.chartData.sleepStats.labels[index], // 睡眠标签（<6h等）
              label: {
                show: true,
                position: 'top',
                color: '#333',
                fontSize: 12,
                formatter: this.chartData.sleepStats.labels[index]
              }
            })),
            // 柱状图颜色：红色=睡眠＜6小时（风险关联），绿色/蓝色=正常
            itemStyle: {
              color: params => {
                return params.value < 6 ? '#FF4949' : params.value <= 8 ? '#67C23A' : '#409EFF'
              },
              borderRadius: 4 // 柱状图圆角
            },
            barWidth: '50%' // 柱状图宽度（占X轴刻度的50%）
          }
        ]
      }

      this.sleepChart.setOption(option)
      // 窗口resize监听（适配屏幕变化）
      this.sleepResize = () => this.sleepChart.resize()
      window.addEventListener('resize', this.sleepResize)
    }
  },
  // 组件销毁：清理图表实例和事件（避免内存泄漏）
  beforeDestroy() {
    if (this.emotionChart) {
      window.removeEventListener('resize', this.emotionResize)
      this.emotionChart.dispose()
    }
    if (this.sleepChart) {
      window.removeEventListener('resize', this.sleepResize)
      this.sleepChart.dispose()
    }
  }
}
</script>

<style scoped>
/* 页面整体样式 */
.trend-page {
  position: relative;
  min-height: 100vh;
  font-family: "Microsoft YaHei", sans-serif;
  padding: 30px 20px;
}

/* 背景容器（延续原页面半透明背景） */
.bg-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}
.bg-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 100%;
  background: url("~@/assets/image22.png") no-repeat center center;
  background-size: cover;
  opacity: 0.5;
  z-index: -1;
}

/* 趋势分析卡片（半透明+模糊效果） */
.trend-card {
  width: 1000px;
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(244, 241, 241, 0.3);
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

/* 卡片标题 */
.card-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 数据来源说明 */
.data-source {
  font-size: 12px;
  color: #666;
  text-align: center;
  margin-bottom: 24px;
}

/* 图表容器布局（桌面并排，移动端换行） */
.charts-wrap {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
/* // 最小宽度（小于时自动换行） */
.chart-item {
  flex: 1;
  min-width: 400px; 
}

/* 图表标题（左侧蓝色边框，关联原页面视觉） */
.chart-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 12px;
  border-left:none;
  padding-left: 8px;
}

/* 图表样式（白色背景+轻微阴影，确保清晰） */
.chart {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 15px;
}


.no-data {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  color: #999;
  font-size: 14px;
}
.no-data .el-icon-form {
  font-size: 40px;
  margin-bottom: 8px;
}
.no-data .el-button {
  color: #409EFF;
  margin-top: 8px;
  font-size: 14px;
}


.chart-desc {
  font-size: 12px;
  color: #666;
  padding-left: 8px;
  border-top: 1px dashed #eee;
  padding-top: 16px;
}
</style>